<template>
	<div
		style="
			margin-top: 50px;
			font-size: 24px;
			text-align: center;
			min-height: 250px;
		"
		v-loading="loading"
	>
		<template v-if="!loading">
			<img src="@/assets/success.svg" alt="" width="60px" height="auto" />
			<p style="color: #07bc07; margin: 15px auto">出单成功</p>
			<p
				style="
					font-size: 16px;
					text-align: left;
					width: 500px;
					margin: 15px auto;
				"
			>
				承保结果和保单信息可以通过手机号码登录平台查看，我们也将最近进度通过短信通知您，请注意查收。
				<!-- 您的投保相关资料及支付凭证已提交至保险公司，请您耐心等待保险公司确认保费及承保出单信息，您可以直接与您的保险服务人员沟通相关进度及获取保单信息。感谢您的支持与配合！ -->
			</p>
		</template>
	</div>
</template>

<script>
import { queryPayState } from '@/api/order'

var urlSearchParams = new URLSearchParams(location.search)
var UrlSearch = {}
for (let [key, value] of urlSearchParams.entries()) {
	UrlSearch[key] = value
}
export default {
	data() {
		return {
			loading: true
		}
	},
	computed: {
		businessId() {
			return this.$route.query.businessId
		}
	},
	async mounted() {
		this.loading = true

		while (true) {
			try {
				await this.queryPayState()
				break
			} catch (r) {}
		}

		this.loading = false
	},
	methods: {
		queryPayState() {
			return queryPayState(UrlSearch.businessId || this.businessId).then(
				(servData) => {
					return servData.code === 0 ? true : Promise.reject()
				}
			)
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.wrapper {
	padding: 20px;
}
.box-card {
	margin-bottom: 20px;
}
.box {
	padding: 20px;
}
.shadow {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.field-cont {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: start;

	.field {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px;
		align-items: start;
		&__title {
			white-space: nowrap;
			min-width: 120px;
		}
		&--block {
			grid-column: -1 / 1;
		}
		&--strong {
			.field__title {
				font-weight: 600;
			}
		}
	}
}
</style>
